<template>
  <scroll-view @scrolltolower="questions.getList()" class="w-full h-full overflow-scroll">
    <div
      class="item w-full p-20px box-border relative"
      v-for="(i, index) in questions.list"
      :key="index"
    >
      <div class="intro text-A3A3A3" :style="i.isCreatedBySelf ? 'max-width: 4.5rem;' : ''">
        {{ i.createTime }}<span class="px-10px">|</span>{{ i.typeName ? i.typeName : '未选题型'
        }}<span class="px-10px">|</span>{{ i.difficultyLevel | getDifficultyLevelName
        }}<span class="px-10px">|</span
        ><span v-for="(kpointName, kpointNameIndex) in i.kpointName" :key="kpointNameIndex"
          >{{ kpointName
          }}<span class="px-10px" v-if="kpointNameIndex < i.kpointName.length - 1">|</span></span
        >
      </div>

      <div class="mt-11px" v-if="i.isCreatedBySelf">
        <el-image
          style="width: 2.12rem; height: 1.06rem"
          :src="i.stem"
          :preview-src-list="[i.stem]"
          mode=""
        />
      </div>
      <div
        class="stem mt-11px pb-20px inline-block"
        style="white-space: break-spaces; word-break: break-all"
        v-html="i.stem"
        v-else
      ></div>
      <!-- 作答过程 -->
      <div v-show="i.isShowExplanation && i.answerPicture">
        <div class="mb-6px">【作答过程】</div>
        <div style="white-space: break-spaces; word-break: break-all">
          <el-image
            style="width: 0.8rem; height: auto"
            :src="i.answerPicture"
            :preview-src-list="[i.answerPicture]"
          />
        </div>
      </div>
      <!-- answer -->
      <div v-show="i.isShowExplanation">
        <div>【答案】</div>
        <div
          style="white-space: break-spaces; word-break: break-all"
          v-html="i.displayAnswer || i.answer"
        ></div>
      </div>
      <!-- explanation -->
      <div
        class="pb-20px"
        style="white-space: break-spaces; word-break: break-all"
        v-html="i.explanation"
        v-show="i.isShowExplanation"
      ></div>

      <div class="btn-group absolute flex text-white">
        <div
          class="btn-item px-8px bg-51C3FF mr-10px flex items-center"
          v-show="i.isCreatedBySelf"
          @click="questions.edit(i)"
        >
          <span>编辑题目</span>
        </div>
        <div
          class="btn-item px-8px bg-51C3FF mr-10px flex items-center"
          v-show="i.isCreatedBySelf"
          @click="questions.uploadExplanation(i)"
        >
          {{ i.explanation ? '查看解析' : '上传解析' }}
        </div>
        <div
          class="btn-item px-8px bg-51C3FF mr-10px flex items-center"
          @click="questions.recommend(i)"
        >
          <span>举一反三</span>
        </div>
        <div class="btn-item px-8px bg-FF4040 flex items-center" @click="questions.remove(i.id)">
          <span>移出错题</span>
        </div>
      </div>

      <div
        class="explanation absolute text-51C3FF"
        v-show="!i.isCreatedBySelf"
        @click="i.isShowExplanation = !i.isShowExplanation"
      >
        <span>{{ i.isShowExplanation ? '收起解析' : '查看解析>>' }}</span>
      </div>
    </div>
    <LoadMore
      cssStyle="padding:0;"
      :loading="questions.loading"
      :has-more="questions.hasMore"
      @click="questions.getList()"
    />
  </scroll-view>
</template>

<script>
import ScrollView from '@/components/scroll-view'
import LoadMore from '@/components/load-more'

export default {
  components: {
    ScrollView,
    LoadMore
  },
  filters: {
    getDifficultyLevelName(val) {
      switch (val) {
        case '17':
          return '容易'
        case '18':
          return '较易'
        case '19':
          return '适中'
        case '20':
          return '较难'
        case '21':
          return '困难'
        default:
          return '未选难度'
      }
    }
  },
  props: {
    questions: {
      type: Object,
      default: () => {
        return {
          list: [],
          getList: () => {}
        }
      }
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.item {
  min-height: 179px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;

  &:not(:last-child) {
    margin-bottom: 20px;
  }

  .intro {
    font-size: 24px;
    line-height: 26px;
    max-width: 640px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .image {
    width: 220px;
    height: 106px;
  }

  .btn-group {
    right: 20px;
    top: 20px;

    .btn-item {
      height: 30px;
      font-size: 24px;
      border-radius: 4px;
      line-height: normal;
    }
  }

  .stem {
    /deep/ & fieldset {
      font-size: inherit !important;
    }
  }

  .explanation {
    right: 20px;
    bottom: 20px;
    font-size: 24px;
    line-height: 26px;
  }
}
</style>
